import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import Footer from '../common/PageNotFound.js';

export class DefaultPage extends Component {
  static propTypes = {
    my: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired,
  };
  constructor(props) {
    super(props)
    this.state = {
      isLogin: true
    }
  }
  render() {
    let { isLogin } = this.state;
    return (
      <div className="my-default-page">
        <div className='header'>
          <i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></i>
          <span>个人中心</span>
          <span></span>
        </div>

        <div className="bg">
          {
            isLogin ?
              <div className="center">
                <div className="head">
                  <img src="//img02.hua.com/pc/assets/img/avatar_default_07.jpg" />
                </div>
                <div className="tefent">
                  <p className="haoma">15999691065</p>
                  <p className="tubiao"><i className="iconfont icon-zuanshi font-a"></i> 注册会员</p>
                </div>
              </div> :
              <div className="log out ">
                <p>Hi,欢迎来到花札网</p>
                <button className="bt">登录/注册</button>
              </div>
          }
        </div>

        <div className="orderForm">
          <div className="order-top">
            <div>
              <span>我的订单</span>
              <a>全部订单<i className="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-1"></i></a>
            </div>
          </div>
          <div className="order-bottom">
            <ul>
              <li>
                <p className="img"></p>
                <p>待付款</p>
              </li>
              <li>
                <p className="img"></p>
                <p>今日配送</p>
              </li>
              <li>
                <p className="img"></p>
                <p>待评价</p>
              </li>
            </ul>
          </div>
        </div>

        <div className="panel">
          <div className="panel-top">
            <ul>
              <li>
                <i className="iconfont icon-youhuiquan"></i>
                <p>优惠券</p>
              </li>
              <li>
                <i className="iconfont icon-qiabao"></i>
                <p>权益卡</p>
              </li>
              <li>
                <i className="iconfont icon-yue"></i>
                <p>余额</p>
              </li>
              <li>
                <i className="iconfont icon-zuanshi"></i>
                <p>会员积分</p>
              </li>
            </ul>
          </div>
          <div className="panel-bottom">
            <ul>
              <li>
                <i className="iconfont icon-dizhi"></i>
                <p>收货地址</p>
              </li>
              <li>
                <i className="iconfont icon-paidui"></i>
                <p>生日纪念提醒</p>
              </li>
              <li>
                <i className="iconfont icon-shoucang"></i>
                <p>我的收藏</p>
              </li>
              <li>
                <i className="iconfont icon-lishijilu"></i>
                <p>浏览记录</p>
              </li>
            </ul>
          </div>
        </div>

        <div className="bottom">
          <ul>
            <li>
              <i className="iconfont icon-kefu"></i>
              <p>联系客服</p>
            </li>
            <li>
              <i className="iconfont icon-bangzhuzhongxin"></i>
              <p>帮助中心</p>
            </li>
            <li>
              <i className="iconfont icon-guanyuwomen"></i>
              <p>关于花札</p>
            </li>
            <li>
              <i className="iconfont icon-buzhi"></i>
              <p>设置</p>
            </li>
          </ul>
        </div>

        <Footer></Footer>
      </div>

    );
  }
}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    my: state.my,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
